<!-- 对 button 组件的编辑 -->
<template>
  <div class="image-edit" v-if="dialogShow">
    <SetDesignDialog :title="name" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose"
      ref="settingComponentDialog">
      <div class="edit-container-u">
        <el-tabs v-model="activeName">
          <el-tab-pane label="设置" name="1">
            <el-row>
              <el-col :span="12">
                <TextAlign :defValue="data.config.textAlign" :chgValue="(d)=>{data.config.textAlign = d}" />
              </el-col>
              <el-col :span="12">
                <el-form :label-width="formLabelWidth">
                  <el-form-item label="图片边框" style="margin-bottom:0px;">
                    <el-select size="mini" v-model="data.config.borderClass" placeholder="请选择">
                      <el-option label="默认" value=""></el-option>
                      <el-option label="极小" value="w-img-border-Hairline w-img-border-gray"></el-option>
                      <el-option label="小" value="w-img-border-Thin w-img-border-gray"></el-option>
                      <el-option label="中" value="w-img-border-Medium w-img-border-gray"></el-option>
                      <el-option label="大" value="w-img-border-Thick w-img-border-gray"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form :label-width="formLabelWidth">
                  <el-form-item label="边框颜色" style="margin-bottom:0px;">
                    <el-color-picker size="mini" v-model="data.config.borderColor"></el-color-picker>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12">
                <el-form :label-width="formLabelWidth">
                  <el-form-item label="边框大小" style="margin-bottom:0px;">
                    <el-select size="mini" v-model="data.config.borderWidth" placeholder="请选择">
                      <el-option label="无" value=""></el-option>
                      <el-option label="1px" value="1px"></el-option>
                      <el-option label="2px" value="2px"></el-option>
                      <el-option label="3px" value="3px"></el-option>
                      <el-option label="4px" value="4px"></el-option>
                      <el-option label="5px" value="5px"></el-option>
                      <el-option label="6px" value="6px"></el-option>
                      <el-option label="7px" value="7px"></el-option>
                      <el-option label="8px" value="8px"></el-option>
                      <el-option label="9px" value="9px"></el-option>
                      <el-option label="10px" value="10px"></el-option>
                      <el-option label="11px" value="11px"></el-option>
                      <el-option label="12px" value="12px"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form :label-width="formLabelWidth" @submit.native.prevent>
                  <el-form-item label="边框圆角" style="margin-bottom:0px;">
                    <el-input @blur="borRadiusblur" type="number" min="0" size="mini" v-model="data.config.borderRadius" placeholder="0" style="width:70px;">
                    </el-input> px
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12">
                <el-form :label-width="formLabelWidth">
                  <el-form-item label="懒加载" style="margin-bottom:0px;">
                    <el-select size="mini" v-model="data.config.islazyload" placeholder="请选择">
                      <el-option label="关闭" :value="0"></el-option>
                      <el-option label="开启" :value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <LinkSimple title="图片链接" :defValue="data.config.link" ref="linkSimple" :chgValue="changeLink" />
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form :label-width="formLabelWidth">
                  <el-form-item label="是否灯箱" style="margin-bottom:0px;">
                    <el-radio-group @change="lingthBoxChange" size="mini" v-model="data.config.linghtBox">
                      <el-radio :label="0">关闭</el-radio>
                      <el-radio :label="1">开启</el-radio>
                    </el-radio-group>
                    <div class="tip-color1" style="line-height:1.3; color:#999; margin-bottom:10px;">若灯箱开启，链接无效！</div>
                  </el-form-item>
                </el-form>
                <el-form :label-width="formLabelWidth" @submit.native.prevent>
                  <el-form-item label="文字标题" style="margin-bottom:0px;">
                    <el-input size="mini" v-model="data.config.title" maxlength="128" placeholder="文字标题内容">
                    </el-input>
                  </el-form-item>
                </el-form>
                <el-form :label-width="formLabelWidth" @submit.native.prevent>
                  <el-form-item label="文字说明" style="margin-bottom:0px;">
                    <el-input size="mini" type="textarea" :rows="3" :maxRows="5" v-model="data.config.caption"
                      maxlength="128" placeholder="文字说明内容">
                    </el-input>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12">
                <el-form :label-width="formLabelWidth" @submit.native.prevent>
                  <el-form-item label="选择图片" style="margin-bottom:0px;">
                    <el-image @click.stop="changeImageRepertory" style="height:140px;max-width:240px;cursor:pointer;    background-color: #eee;"
                      :src="imageSrc" :fit="'contain'">
                      <div slot="placeholder" class="image-slot">
                        加载中<span class="dot">...</span>
                      </div>
                    </el-image>
                  </el-form-item>
                </el-form>
                <el-form :label-width="formLabelWidth" @submit.native.prevent>
                  <el-form-item label="alt 属性" style="margin-bottom:0px;">
                    <el-input size="mini" v-model="data.config.img.alt" maxlength="32" placeholder="图片alt属性">
                    </el-input>
                  </el-form-item>
                </el-form>
                <el-form :label-width="formLabelWidth" @submit.native.prevent>
                  <el-form-item label="title 属性" style="margin-bottom:0px;">
                    <el-input size="mini" v-model="data.config.img.title" maxlength="32" placeholder="图片title属性">
                    </el-input>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="样式选择" name="2">
            <el-form label-width="80px" class="theme-uu">
              <el-form-item label="当前样式" style="margin-bottom:0px;">
                <el-select :disabled="true" size="mini" v-model="data.theme" placeholder="请选择" style="width:230px;">
                  <el-option v-for="(item, index) in themes" :key="index" :label="item.title"
                    :value="''+item.theme">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div class="iframe" v-loading="iframeLoading">
              <iframe :src="iframeSrc" frameborder="0" style="width:100%;height:354px; height:calc(100vh - 300px);" ref="iframeRender"></iframe>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </SetDesignDialog>
    <ChooseRepertory ref="chooseImage" />
  </div>
</template>

<script>
import ChooseRepertory from '@/components/common/repertory/ChooseRepertory.vue'
import ImagesEmpty from '@/assets/images/image-empty.png'
import LinkSimple from '@/components/common/design/dialog/component/formitem/LinkSimple.vue'
import TextAlign from '@/components/common/design/dialog/component/formitem/TextAlign.vue'
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import * as WindowType from '@/config/windowtype.js'
// import * as PubsubType from '@/config/pubsubtype.js'
import * as functions from '@/core/functions.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
// import PubSub from 'pubsub-js'
import Global from '@/config/global.js'
import qs from 'qs'
import _ from 'lodash'

export default {
  computed: {
    ...mapState([
      'design'
    ]),
    imageSrc () {
      return this.data.config.img.src ? this.data.config.img.src : this.data.config.img.emptySrc
    }
  },
  created () {
    VueFunctions.method(WindowType.EDIT_COMPONENT_WITH_COMPONENTIMAGE, (bjComponent) => {
      this.close()
      this.dialogShow = true
      this.bjComponent = bjComponent
      this.data = bjComponent.render.data

      this.data.theme = '' + this.data.theme

      // coding ...
      if (this.data && this.data.config && this.data.config.textAlign === '') {
        this.data.config.textAlign = 'left'
      }

      this.activeName = '1'
      this.iframeLoading = true
      this.init = true

      this.iframeStyle = {
        w: 825,
        row: 15,
        col: 4,
        compname: 'component_image',
        theme: this.$store.state.site.config.theme,
        color: this.$store.state.site.config.color,
        ttextalign: 'center',
        tcolor: '#888',
        now: new Date().getTime()
      }
      let query = qs.stringify(this.iframeStyle)
      this.iframeSrc = '/api/udin/component?' + query

      this.$nextTick(() => {
        this.$refs['settingComponentDialog'].open()
      })

      // iframe 加载完成后回调的方法，
      let funcname = WindowType.API_UDIN_COMPONENT_ONLOAD_.replace('[ComponentName]', this.iframeStyle.compname).toUpperCase()
      window[funcname] = () => {
        this.iframeLoading = false
        let componentName = this.getComponentName()
        let defaultData = BackendjsFunctions.componentDefaultData(componentName)
        let objArray = []
        for (let i = 1; i <= this.themes.length; i++) {
          defaultData.ele = '#render-' + i
          defaultData.data.theme = '' + i

          let configTheme = this.themes.find(element => {
            return parseInt(element.theme) === i
          })

          // 定义空白图片
          defaultData.data.config.img.emptySrc = ImagesEmpty
          defaultData.data.config.img.src = Global.demoImage
          defaultData.data.config.title = configTheme ? configTheme.title : '文字标题'
          defaultData.data.config.caption = configTheme ? configTheme.caption : null

          objArray.push({
            renderData: _.cloneDeep(defaultData),
            title: '编号：' + i,
            theme: i
          })
        }
        // 调用 iframe 中的 render 方法进行渲染
        this.$refs['iframeRender'].contentWindow.render(objArray, this.data.theme)
      }

      // 选择theme后回调的方法，并且传入选择的数据
      let funcallbackname = WindowType.API_UDIN_COMPONENT_ONLOAD_CALLBACK_.replace('[ComponentName]', this.iframeStyle.compname).toUpperCase()
      window[funcallbackname] = (renderData) => {
        this.data.theme = renderData.data.theme
        if (this.init) {
          this.init = false
        }
        // 校验现在的theme是否与iframe显示的选择的theme一致
        this.$refs['iframeRender'].contentWindow.checkTheme(this.data.theme)
      }
    })
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE, (event, data) => {
    //   this.close()
    // })
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  data () {
    return {
      dialogShow: false,
      iframeLoading: true,
      activeName: '1',
      iframeStyle: {},
      formLabelWidth: '120px',
      name: '图片',
      bjComponent: null,
      data: null,
      iframeSrc: null,
      themes: themes,
      init: true
    }
  },
  methods: {
    getComponentName () {
      var compname = this.iframeStyle.compname
      var temp = this.titleCase(compname.replace('_', ' ')).replace(' ', '')
      return temp.replace(temp[0], temp[0].toLowerCase())
    },
    titleCase (str) {
      return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase())
    },
    borRadiusblur () {
      if (isNaN(parseInt(this.data.config.borderRadius))) {
        this.data.config.borderRadius = 0
      } else {
        this.data.config.borderRadius = parseInt(this.data.config.borderRadius)
      }
    },
    changeLink (link) {
      this.data.config.link = link
      // if (link.href && parseInt(this.data.config.linghtBox) === 1) {
      //   this.data.config.linghtBox = 0
      // }
    },
    lingthBoxChange () {
      // if (parseInt(this.data.config.linghtBox) === 1) {
      //   this.data.config.link.href = ''
      //   this.$refs['linkSimple'].setLink(this.data.config.link)
      // }
    },
    changeImageRepertory () {
      this.$refs['chooseImage'].show({ title: '选择图片', max: 1, where: { type: [0, 4] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList.length > 0) {
          repertoryList.forEach(item => {
            this.data.config.img.src = functions.getRepertoryImageSrcByHostRepertory(item)
            this.bjComponent._other.imageList.hrepertory = _.cloneDeep(item)
          })
        }
      })
    },
    // ......
    close () {
      this.dialogShow = false
      this.iframeLoading = true
      this.activeName = '1'
      this.iframeStyle = {}
      this.bjComponent = null
      this.data = null
      this.iframeSrc = ''
      this.init = true
    },
    saveclose () {
      this.bjComponent.render.data = _.cloneDeep(this.data)
      BackendjsFunctions.saveComponent(this.bjComponent)
      this.close()
    }
  },
  components: {
    SetDesignDialog,
    LinkSimple,
    TextAlign,
    ChooseRepertory
  }
}

const themes = [
  { theme: '1', title: '无效果' },
  { theme: '2', title: '移入右移' },
  { theme: '3', title: '移入上移' },
  { theme: '4', title: '移入旋转 360°' },
  { theme: '5', title: '移入放大' },
  { theme: '6', title: '移入缩小' },
  { theme: '7', title: '移入朦胧消失' },
  { theme: '8', title: '文字消失，图片出现' },
  { theme: '9', title: '底部透明文字' },
  { theme: '10', title: '底部文字挤压上移' },
  { theme: '11', title: '文字中间自然出现' },
  { theme: '12', title: '文字扩大出现' },
  { theme: '13', title: '左上角划入' },
  { theme: '14', title: '右上角划入' },
  { theme: '15', title: '纵向转动' },
  { theme: '16', title: '横向转动' },
  { theme: '17', title: '文字右移入+图片左移出' },
  { theme: '18', title: '文字左移入+图片右移出' },
  { theme: '19', title: '文字右移入+图片小左移' },
  { theme: '20', title: '文字左移入+图片小右移' },
  { theme: '21', title: '链接图标' },
  { theme: '22', title: '查看图标' },
  { theme: '23', title: '边框链接' },
  { theme: '24', title: '阴影扫描' },
  { theme: '25', title: '黑白换彩色' },
  { theme: '26', title: '图文组合1', caption: '文字说明' },
  { theme: '27', title: '图文组合2', caption: '文字说明' },
  { theme: '28', title: '图文组合3', caption: '文字说明' },
  { theme: '29', title: '图文组合4', caption: '文字说明' },
  { theme: '30', title: '图文组合5', caption: '文字说明' },
  { theme: '31', title: '图文组合6', caption: '文字说明' },
  { theme: '32', title: '图文组合7', caption: '文字说明' },
  { theme: '33', title: '图文组合8', caption: '文字说明' },
  { theme: '34', title: '图文组合9', caption: '文字说明' },
  { theme: '35', title: '图文组合10', caption: '文字说明' },
  { theme: '36', title: '图文组合11', caption: '文字说明' },
  { theme: '37', title: '图文组合12', caption: '文字说明' },
  { theme: '38', title: '图文组合13', caption: '文字说明' },
  { theme: '39', title: '图文组合14', caption: '文字说明' },
  { theme: '40', title: '图文组合15', caption: '文字说明' },
  { theme: '41', title: '图文组合16', caption: '文字说明' },
  { theme: '42', title: '图文组合17', caption: '文字说明' },
  { theme: '43', title: '图文组合18', caption: '文字说明' },
  { theme: '44', title: '图文组合19', caption: '文字说明' },
  { theme: '45', title: '图文组合20', caption: '文字说明' },
  { theme: '46', title: '图文组合21', caption: '文字说明' },
  { theme: '47', title: '图文组合22', caption: '文字说明' },
  { theme: '48', title: '图文组合23', caption: '文字说明' },
  { theme: '49', title: '图文组合24', caption: '文字说明' },
  { theme: '50', title: '图文组合25', caption: '文字说明' },
  { theme: '51', title: '图文组合26', caption: '文字说明' },
  { theme: '52', title: '图文组合27', caption: '文字说明' },
  { theme: '53', title: '图文组合28', caption: '文字说明' },
  { theme: '54', title: '图文组合29', caption: '文字说明' },
  { theme: '55', title: '图文组合30', caption: '文字说明' },
  { theme: '56', title: '图文组合31', caption: '文字说明' },
  { theme: '57', title: '图文组合32', caption: '文字说明' },
  { theme: '58', title: '图文组合33', caption: '文字说明' },
  { theme: '59', title: '图文组合34', caption: '文字说明' }
]

</script>
<style scoped>
.image-edit .image-slot {
  color: #656565;
  display: flex;
  justify-content: center;
  align-items: center;
}
.edit-container-u {
  width: 840px;
  min-height:calc(100vh - 200px);
}
.theme-uu /deep/ .el-input__suffix {
  display:none;
}
</style>
